<template>
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="50%" direction="rtl" v-model="show"
        :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">借调审批</div>
        </template>
        <span class="stay_title">待审批</span>
        <el-table v-loading="stayloading" :data="stayDataList" @selection-change="stayHandleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="商品名称" align="center" prop="styleName" />
            <el-table-column label="商品编码" align="center" prop="styleCode" />
            <el-table-column label="商品主图" align="center" prop="productImage" width="100">
                <template #default="scope">
                    <image-preview :src="scope.row.productImage" :width="50" :height="50" />
                </template>
            </el-table-column>
            <el-table-column label="类目" align="center" prop="categoryName" />
            <el-table-column label="售价" align="center" prop="price" />
            <el-table-column label="佣金" align="center" prop="commission" />
            <el-table-column label="卖点" align="center" prop="sellingPoints" />
            <el-table-column label="还品时间" align="center" prop="date" />
            <el-table-column label="借调主播" align="center" prop="likePerson" />
        </el-table>
        <pagination v-show="stayTotal > 0" :total="stayTotal" v-model:page="stayQueryParams.pageNum"
            v-model:limit="stayQueryParams.pageSize" @pagination="getStayList" />
        <div class="stay_button">
            <el-button type="primary" @click="stayAgree">同意</el-button>
            <el-button @click="stayReject">驳回</el-button>
        </div>
        <span class="stay_title">已审批</span>
        <el-table v-loading="alreadyloading" :data="alreadyDataList">
            <el-table-column label="序号" type="index" width="55" align="center" />
            <el-table-column label="商品名称" align="center" prop="styleName" />
            <el-table-column label="商品编码" align="center" prop="styleCode" />
            <el-table-column label="商品主图" align="center" prop="productImage" width="100">
                <template #default="scope">
                    <image-preview :src="scope.row.productImage" :width="50" :height="50" />
                </template>
            </el-table-column>
            <el-table-column label="类目" align="center" prop="categoryName" />
            <el-table-column label="售价" align="center" prop="price" />
            <el-table-column label="佣金" align="center" prop="commission" />
            <el-table-column label="审批状态" align="center" prop="status" />
            <el-table-column label="审批时间" align="center" prop="alredyDate" />
            <el-table-column label="审批人" align="center" prop="alredyPeople" />
            <el-table-column label="借调主播" align="center" prop="likePerson" />
        </el-table>
        <pagination v-show="alreadyTotal > 0" :total="alreadyTotal" v-model:page="alreadyQueryParams.pageNum"
            v-model:limit="alreadyQueryParams.pageSize" @pagination="alredyStayList" />
    </el-drawer>
</template>
<script setup name="SecondmentApproval" lang="ts">
import { StayDataList, AlreadyDataList } from '@/api/group/selectionSupermarket/types'
const props = defineProps({
    secondmentApprovalVisible: {
        type: Boolean,
        default: false
    }
});
const show = computed(() => props.secondmentApprovalVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}

const stayloading = ref(false)
const stayDataList = ref<StayDataList[]>()
const stayIds = ref<Array<string | number>>([]);
const stayTotal = ref(0)
const stayQueryParams = ref({
    pageNum: 1,
    pageSize: 10,
})
const alreadyloading = ref(false)
const alreadyDataList = ref<AlreadyDataList[]>()
const alreadyTotal = ref(0)
const alreadyQueryParams = ref({
    pageNum: 1,
    pageSize: 10,
})

/** 多选框选中数据 */
const stayHandleSelectionChange = (selection: StayDataList[]) => {
    stayIds.value = selection.map((item) => item.id);
}
/** 同意 */
const stayAgree = () => {
    console.log('同意', stayIds.value)
}
/** 驳回 */
const stayReject = () => {
    console.log('驳回', stayIds.value)
}
/** 获取待审核数据 */
const getStayList = async () => {
    try {
        stayloading.value = true;
        // const res = await productsBusinessList();
        stayDataList.value = [{ id: '6666', styleName: '1', styleCode: '2', }];
        stayTotal.value = 20;
        stayloading.value = false;
    } catch (e) {
    } finally {
        stayloading.value = false;
    }
};
/** 获取已审核数据 */
const alredyStayList = async () => {
    try {
        alreadyloading.value = true;
        // const res = await productsBusinessList();
        alreadyDataList.value = [{ id: '6666', styleName: '1', styleCode: '2', }];
        alreadyTotal.value = 20;
        alreadyloading.value = false;
    } catch (e) {
    } finally {
        alreadyloading.value = false;
    }
};

onMounted(() => {
    getStayList();
    alredyStayList();
})
</script>
<style scoped lang="scss">
.stay_title {
    display: inline-block;
    margin: 20px 0;
    color: rgba(74, 180, 250);
}

.stay_button {
    margin: 50px 0;
    text-align: right;
}
</style>
